<template>
  <div>
    <section class="lists-wrap position">
      <div class="lists-title">效果</div>
      <router-link to="/bag" class="lists-li">
        <span class="lists-li-title">背景</span>
      </router-link>
      <router-link to="/infiniteLoading" class="lists-li">
        <span class="lists-li-title">无限加载</span>
      </router-link>
      <router-link to="/gradual" class="lists-li">
        <span class="lists-li-title">渐进式图片</span>
      </router-link>
      <router-link to="/transition" class="lists-li">
        <span class="lists-li-title">切换动画</span>
      </router-link>
      <div class="lists-title">JS</div>
      <router-link to="/file" class="lists-li">
        <span class="lists-li-title">文件操作</span>
      </router-link>
      <li class="lists-li">
        <span class="lists-li-title" @click="router()">路由</span>
        <div>
          <input type="text" v-model="name">
          <button @click="search()">查询</button>
        </div>
        <router-link to="/user/1">
          <span class="lists-li-title">路由-张三</span>
        </router-link>
        <router-link to="/user/2">
          <span class="lists-li-title">路由-李四</span>
        </router-link>
        <router-link to="/user/2/img/123">
          <span class="lists-li-title">路由-李四-img-123</span>
        </router-link>
      </li>
      <router-link to="/promise" class="lists-li">
        <span class="lists-li-title">promise</span>
      </router-link>
      <router-link to="/arguments" class="lists-li">
        <span class="lists-li-title">arguments</span>
      </router-link>
      <router-link to="/store" class="lists-li">
        <span class="lists-li-title">vuex</span>
      </router-link>
      <div class="lists-title">程序</div>
      <router-link to="/arr" class="lists-li">
        <span class="lists-li-title">js操作</span>
      </router-link>
    </section>
    <section>
      <div class="ss">
       然后就可以在你的样式表中通过@include来使用这个混合器，放在你希望的任何地方。@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。如果像下边这样写：
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data () {
    return {
      name: ''
    }
  },
  mounted () {
    // console.log(this.$route)
    // console.log(this.$router)
  },
  methods: {
    router () {
      this.$router.push('/user')
    },
    search () {
      this.$router.push({path: '/user', query: { q: `${this.name}` }})
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '../styles/mixin.scss';
  $border:1px solid #ccc;
  .position{
    margin: auto;
    margin-top: 15px;
  }
  // 列表
  .lists-wrap{
    @media screen and (min-width:1000px) { // 页面宽度大于1000px
      width: 500px;
    }
    width: 300px;
    border: $border;
    border-bottom: none;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2);
    .lists-title{
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2px 0;
      border-bottom: $border;
      font-size: 18px;
      font-weight: bold;
      text-align: center;
    }
    .lists-li{
      display: block;
      width: 100%;
      border-bottom: $border;
      &:hover{ // 父选择器
        color: red;
      }
      .lists-li-title{
        display: block;
        padding: 5px;
      }
    }
  }
  .p{
    @include text(
      $color:red,
      $font-size:16px
    );
    // @include text()
  }
</style>
